<template>
  <div class="orderStatistics">
    <div class="orderStatistics-header clearfloat">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/company/home/menu' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>申报统计</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="btns fr">
        <table-search
          class='clearfloat'
          ref="table-search"
          :isGetAgent='false'
          :selectHead="selectHead"
          @searchMethods="searchMethods">
        </table-search>
      </div>
    </div>
    <div class="orderStatistics-main">
      <el-table
        ref="tableRef"
        :data="tableData"
        border
        v-loading="loading"
        height='100%'>
        
        <el-table-column show-overflow-tooltip label="外观设计案件数" align="center" prop='appearances' min-width="200"></el-table-column>
        <el-table-column show-overflow-tooltip label="发明专利案件数" align="center" prop='inventions' min-width="200"></el-table-column>
        <el-table-column show-overflow-tooltip label="实用新型案件数" align="center" prop='practicals' min-width="200"></el-table-column>
        <el-table-column show-overflow-tooltip label="授权案件数" align="center" prop='grants' min-width="200"></el-table-column>
     

      </el-table>
    </div>

  </div>
</template>

<script>
import tableSearch from '~/components/tableSearch'
export default {
  components: {
    tableSearch
  },
  data () {
    return {
      tableData:[],
      loading: false,
      pageSize: 25, //一页可以几条
      total: 0,
      selectHead: [
        {
          label: '统计时间',
          props: 'time'
        },
      ],
      paramsByOrder: {},
      paramsByOrder: {}
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    getTableData (args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
        guard: 'company'
      }
      params = {...params, ...this.paramsByOrder, ...this.search_params}
      if (args) {
        params = {...params, ...args}
      }
      this.loading = true
      this.$axios.get('api/company/statistics', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          if (this.tableData.length) {
            this.tableData[0] = res.data.data
          } else {
            this.tableData.push(res.data.data)
          }
          // this.pageSize = res.data.page.per_page
          this.total = 1
          // this.getMyinfo()
        } else {
          this.loading = false
          this.$message.error('服务器繁忙')
        }
      })
    },

    searchMethods(params, no_search) {
      this.sort_params = {}
      this.currentPage = 1
      this.pageSize = 25
      this.search_params = params

      if (!no_search) {
          this.getTableData()
      }
    },

  }
}
</script>

<style lang='less'>
  .orderStatistics {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding:  25px 30px 0 30px;
    background: #fff;
    display: flex;
    flex-direction: column;

    &-header {
      // height: 45px;
      flex: 0 0 45px;
      .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner,.el-breadcrumb__separator {
            font-size: 25px;
            color:rgba(0,35,151,1);
            font-weight: 400;
          }
        }
        .el-breadcrumb__item:first-child { 
          .el-breadcrumb__inner{
            padding-left: 10px;
            border-left: 5px solid #002397;
          }
        }
      }
      box-sizing: border-box;
    }
    &-main {
      flex: 1;
      max-height:calc(100% - 45px) ;
    }
    &-bottom {
      flex: 0 0 70px;
      padding-top: 19px;
    }
  }
</style>